<template>
  <div>
    <pre v-note>
    + 基本样式规则

        - 在单文件组件中，提供 style 标签可以完成组件样式的定义 **默认是全局样式定义**
            ==> 在vue的模块化环境中，单文件组件的模板和功能是作为组件统一编译，但样式是单独编译
            ==> 单文件组件中定义的样式在开发环境中，会直接作为全局样式定义在index.html的头部

        - 单文件组件，可以通过对 ＜style scoped＞ 标签定义 scoped 属性，完成将样式限制于当前组件的标签上
            ==> scoped 属性的添加会完成两个操作：
                a:将当前组件中模板标签统一以 data-v-hashcode 进行统一动态属性添加
                  当前组件中的子组件标签也会被增加上同样的 data-v-hashcode 属性，并且该属性会传递到子组件的根标签上
                b:为定义在同过 scoped 描述过的 style中的样式，统一增加属性选择 [data-v-hashcode] 
                  属性增加规则(默认规则)：在样式最后进行增加
                  样式穿透 : vue模块环境中安装了vue-loader加载器，该加载器提供 ::v-deep , >>> , /deep/ 手动定义属性出现的位置
                        !! 新脚手架（vue3）中 使用 :deep(穿透样式) 进行手动定义属性出现的位置
                c:在该组件中 hashcode 的只有一个且取值唯一，并且可以保证在当前项目中所有组件都不相同

        - 单文件组件在定义样式时，并不限制 style 标签的出现次数
    </pre>
    <img src="@/assets/Snipaste_2022-08-09_09-14-58.png" alt="" srcset="" />
    <p>测试单文件组件的样式定义</p>

    <p>flag1:{{ flag1 }}</p>
    <SwitchBtn v-model="flag1"></SwitchBtn>

    <p>flag2:{{ flag2 }}</p>
    <SwitchBtn v-model="flag2" style="font-size:6px"></SwitchBtn>

    <p>flag3:{{ flag3 }}</p>
    <img src="@/assets/Snipaste_2022-08-09_09-31-59.png" width="800px" alt="" srcset=""><br>
    <SwitchBtn v-model="flag3" class="size"></SwitchBtn>

    <p>flag4:{{ flag4 }}</p>
    <img src="@/assets/Snipaste_2022-08-09_09-45-34.png" width="800px" alt="" srcset=""><br>
    <SwitchBtn v-model="flag4" class="size my-pot"></SwitchBtn>
  </div>
</template>

<script>
import SwitchBtn from "@/components/SwitchBtn.vue";
export default {
  components: {
    SwitchBtn,
  },
  data() {
    return {
        flag1:false,
        flag2:false,
        flag3:false,
        flag4:true
    }
  },
};
</script>

<style>
p {
  color: red;
}

</style>

<style scoped>
p {
  text-decoration: underline;
}
.size{
    font-size: 6px;
}
/* .my-pot.switch-box .pot{
    background-color: #ccc;
} */

/* .my-pot.switch-box>>> .pot{
    background-color: #ccc;
}
.my-pot.switch-box/deep/ .pot{
    background-color: #ccc;
} */
/* .my-pot.switch-box::v-deep .pot{
    background-color: #ccc;
} */
/* vue3的写法 */
.my-pot.switch-box :deep(.pot){
    background-color: #ccc;
}
</style>